<template>
    <div class="charge">
        <el-container>
            <el-header>生态林一卡通系统 - 充值</el-header>
            <br/>
            <el-main>
                <el-input class="cardInput" v-model="cardNumber" placeholder="请输入卡号"/>
                <br/><br/>
                <el-input class="cardInput" v-model="chargeAmount" placeholder="充值金额"/>
                <br/>
                <el-button class="confirmButton" type="primary" style="width:180px" @click="chargeComfirm()">确定</el-button>
                <el-button class="confirmButton" type="primary" style="width:100px" @click="createUser()">创建</el-button>
            </el-main>
            <el-footer>
                Copy Right: 龙吟信息
            </el-footer>
        </el-container>
        <el-dialog v-model="dialogVisible" title="创建用户" width="30%">
            <el-input v-model="userinfo.cardNumber" placeholder="请输入卡号" />
            <br/><br/>
            <el-input v-model="userinfo.userName" placeholder="请输入姓名" />
            <br/><br/>
            <el-input v-model="userinfo.phoneNumber" placeholder="请输入手机号" />
            <br/><br/>
            <el-input v-model="userinfo.balance" placeholder="请输入余额" />
            <br/><br/>
            <el-button type="primary" @click="createUserConfirm()" :disabled="confirmButtonDisabled">创建用户</el-button>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { reactive, toRefs } from 'vue';
    import { ElMessage } from 'element-plus';
    import apiSet from '../plugins/dbApi';

    export default {
        setup() {
            const data = reactive({
                cardNumber: '' as string,
                chargeAmount: 0 as number,
                userinfo: {
                    cardNumber: '' as string,
                    userName: '' as string,
                    phoneNumber: '' as string,
                    balance: 0 as number,
                },
                dialogVisible: false as boolean,
                confirmButtonDisabled: false as boolean,
            });

            const methods = reactive({
                chargeComfirm: () => {
                    if (!data.cardNumber) {
                        ElMessage.warning('请输入卡号');
                        return;
                    } else if (!/^\d+$/.test(data.cardNumber)) {
                        ElMessage.warning('卡号必须是纯数字');
                        return;
                    }
                    if (!data.chargeAmount) {
                        ElMessage.warning('请输入充值金额');
                        return;
                    } else if (!/^\d+$/.test(data.chargeAmount.toString())) {
                        ElMessage.warning('充值金额必须是纯数字');
                        return;
                    }
                    apiSet.recharge(data.cardNumber, data.chargeAmount).then((res) => {
                        if (res.status === 200) {
                            ElMessage.success('充值成功');
                        } else {
                            ElMessage.error(res.message);
                        }
                    });
                },
                createUser: () => {
                    data.dialogVisible = true;
                },
                createUserConfirm: () => {
                    data.confirmButtonDisabled = true;
                    console.log(data.userinfo);
                    apiSet.createUser(data.userinfo).then((res) => {
                        if (res.status === 200) {
                            ElMessage.success('创建成功');
                            data.confirmButtonDisabled = false;
                            data.dialogVisible = false;
                        } else {
                            data.confirmButtonDisabled = false;
                            ElMessage.error(res.message);
                        }
                    });
                },
            });

            return {
                ...toRefs(data),
                ...toRefs(methods),
            };
        }
    }
</script>

<style scoped>
    @import '../assets/css/charge.css';
</style>